<template>
    <div class="order">
       <yx-header>
            <template #left>
                <van-icon name="arrow-left" @click="$router.go(-1)"/>
            </template>
            <template #center>
               订单列表
            </template>
            <template #right>
              
            </template>
        </yx-header>
        <div class="con">
            <div class="address van-contact-card" @click="$router.push('/addressList')">
                 <van-icon name="location-o" />
                 <section>
                    <p>{{address.linkMan}} {{address.mobile}}</p>
                     <p>{{address.address}}</p>
                 </section>
                 <van-icon name="arrow" />
            </div>
            <!-- 订单列表 -->
            <div class="title">订单列表</div>
            <div class="order-item" v-for="(item,index) in orderList" :key="index">
                <img :src="item.img" alt="">
                <section>
                    <div>
                        <span>{{item.name}}</span>
                        <span>{{item.price}}</span>
                    </div>
                    <div>
                         <span>{{item.ticName}}</span>
                        <span>{{item.carNum}}</span>
                    </div>
                </section>
            </div>
            <!-- 可以使用 CellGroup 作为容器 -->
            <div class="title">
                <span>配送方式</span>
                <span>快递</span>
            </div>
            <van-cell-group>
            <van-field v-model="remark" label="备注" placeholder="请输入备注" />
            </van-cell-group>

        </div>
        <van-submit-bar :price="allPrice*100" button-text="提交订单" @submit="Onsubmit"/>

    </div>
</template>
<script>
import yxHeader from '@/components/yxHeader'
import {ref,reactive,toRefs,computed} from 'vue'
import {useStore} from 'vuex'

import { Notify } from 'vant';
import {useRouter} from 'vue-router'
import {getAddressDefault} from '@/utils/second'
export default {
    setup(props) {
        const data = reactive({
            address:{},
            remark:''
        })
        const {push} = useRouter()
        const {state} = useStore()
        getAddressDefault({token:localStorage.getItem('token')}).then(res=>{
            console.log(res)
            data.address = res.data
        })
        // 获取所有的订单列表
        const orderList = computed(()=>state.shopList.filter(item=>item.order))
        // 获取合计
        const allPrice = computed(()=>{
            let total=0;
            state.shopList.forEach(item=>{
                if(item.order == true){
                    total+=item.carNum*item.price
                }
            })
            return total
        })
        // 提交订单
        const Onsubmit = ()=>{
            push('/payMent')
        }
        return {...toRefs(data),orderList,allPrice,Onsubmit}
    },
    components:{
        yxHeader
    }
}
</script>
<style lang="scss" scoped>
.order{
    background: #f5f5f5;
}
.con{
 
  .address{
    position: relative;
    padding: 10px 16px;
    display: flex;
    align-items: center;
     background: #fff;
    section{
        flex:1;
        margin: 0 10px;
        p{
            font-size: 12px;
            margin-top: 5px;
        }
    }
  }
}
.van-icon-location-o,.van-icon-arrow{
  font-size: 18px;
  color:#999;
}
.title{
    height: 40px;
    line-height: 40px;
    display: flex;
    padding: 0 16px;
     background: #fff;
     justify-content: space-between;
    
}
.order-item{
    display: flex;
    padding: 6px 16px;
    align-items: center;
    margin-top: 10px;
     background: #fff;
    img{
        width:80px;
        height: 80px;
        border-radius: 4px;
        margin-right:10px;
    }
    section{
        flex:1;
         height: 80px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        // align-items: center;
        padding: 6px 0;
        div{
            display: flex;
            justify-content: space-between;
            span{
                font-size:14px;
            }
        }
        div:nth-of-type(2){
            color:#999;
        }
    }
}
</style>
